<template>
	<div class="one-tab">
		<div class="search-row">
			<div class="block">
				<!-- HH:mm:ss datetimerange-->
				<el-date-picker v-model="dateQuantum" value-format="yyyy-MM-dd" type="daterange" :picker-options="pickerOptions"
				 range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="right" unlink-panels>
				</el-date-picker>
			</div>
			<div class="search-btn-div">
				<el-button type="primary" @click="searchClick"><i class="el-icon-search"></i> 查询</el-button>
			</div>
		</div>
		<div class="one-sta">
			<div class="">
				<div id="chart2" style="width: 1000px; height: 400px"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import statisticsTab from '../StatisticsTab.js';
	import SaleFoodService from './SaleFoodService.js';
	export default {
		name: 'SaleFood',
		data() {
			return {
				pickerOptions: statisticsTab.pickerOptions,
				dateQuantum: [],
				data: [],
			}
		},
		created() {
			//初始显示一个月
			this.dateQuantum = statisticsTab.getDate();
			this.getData();
		},
		mounted() {
			this.createChart();
		},
		methods: {
			searchClick() {
				this.getData();
			},
			getData(){
				if(this.dateQuantum.length){
					SaleFoodService.getfoodsalenumberbytimeService({
						start_date: this.dateQuantum[0],
						end_date: this.dateQuantum[1]
					},res=>{
						this.data = res;
						console.log(this.data)
						this.createChart();
					});
				}else{
					this.$message('请选择日期范围');
				}
			},
			createChart() {
				var data = [[],[]];//2是美食分类
				data[0] = this.data[0];
				data[1] = this.data[1];

				var schema = [
					{
						name: 'SaleVolume',
						index: 0,
						text: '销量'
					},
					{
						name: 'SaleAmount',
						index: 1,
						text: '销售额'
					}
				];
				var echarts = require('echarts');

				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('chart2'));
				myChart.setOption({
					backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
						offset: 0,
						color: '#f7f8fa'
					}, {
						offset: 1,
						color: '#cdd0d5'
					}]),
					title: {
						text: '按食品及其类别进行美食销售统计'
					},
					legend: {
						right: 10,
						top: 10,
						data: ['美食', '美食分类'],
						textStyle: {
							color: '#fff',
							fontSize: 16
						}

					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: true
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: {
						name: '销量',
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					yAxis: {
						name: '金额',
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						},
						scale: true
					},
					tooltip: {
						padding: 10,
						backgroundColor: '#222',
						borderColor: '#777',
						borderWidth: 1,
						formatter: function(obj) {
							var param = obj.value;
							return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
								param[3] + 
								'</div>' +
								schema[0].text + '：' + param[0] + '<br>' +
								schema[1].text + '：' + param[1] + '<br>';
						}
					},
					series: [{
						name: '美食',
						data: data[0],
						type: 'scatter',
						symbolSize: function(data) {
							return Math.sqrt(data[2]) / 5e2;
						},
						itemStyle: {
							shadowBlur: 10,
							shadowColor: 'rgba(120, 36, 50, 0.5)',
							shadowOffsetY: 5,
							color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
								offset: 0,
								color: 'rgb(251, 118, 123)'
							}, {
								offset: 1,
								color: 'rgb(204, 46, 72)'
							}])
						}
					}, {
						name: '美食分类',
						data: data[1],
						type: 'scatter',
						symbolSize: function(data) {
							return Math.sqrt(data[2]) / 5e2;
						},
						emphasis: {
							label: {
								show: true,
								formatter: function(param) {
									return param.data[3];
								},
								position: 'top'
							}
						},
						itemStyle: {
							shadowBlur: 10,
							shadowColor: 'rgba(25, 100, 150, 0.5)',
							shadowOffsetY: 5,
							color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
								offset: 0,
								color: 'rgb(129, 227, 238)'
							}, {
								offset: 1,
								color: 'rgb(25, 183, 207)'
							}])
						}
					}]
				});
			}
		},
	}
</script>

<style scoped lang="less">
	@import "../StatisticsTab.less";
</style>
